<script setup lang="ts">
import HeaderHome from "./HeaderHome.vue";
// import MainHome from "./MainHome/MainHome.vue";
import MainHome from "./MainHome/MainHome.vue";
import InfoHomeVue from "./InfoHome.vue";
import SettingVue from "./Setting.vue";
import {
  ElButton,
  ElAvatar,
  ElDivider,
  ElProgress,
  ElImage,
  ElIcon,
  ElLoading,
  ElResult,
} from "element-plus";
// import { Picture as IconPicture } from "@element-plus/icons-vue";
import { Close, Setting } from "@element-plus/icons-vue";
import { reactive, ref } from "vue-demi";
// 游戏运行状态
import { useGameStore } from "../../stores/Game";
// 仓库
const gameStore = useGameStore();

// 软件设置
const drawer = ref(false);
</script>

<template>
  <SettingVue />

  <el-card
    class="error"
    v-if="!gameStore.GameRunState"
    v-loading="!gameStore.GameRunState"
    element-loading-background="rgba(255, 255, 255, 0.1)"
  >
    <el-result icon="error" title="请以管理员模式启动此程序" sub-title="未检测到游戏,等待游戏启动中...">
    </el-result>
  </el-card>

  <div v-show="gameStore.GameRunState">
    <div class="box">
      <HeaderHome />
    </div>
    <div class="box">
      <InfoHomeVue />
    </div>
    <div class="box">
      <MainHome />
    </div>
  </div>
</template>

<style scoped lang="less">
.box {
  margin-bottom: 20px;
}
.error {
  width: 90%;
  margin: 0 5%;
  height: 90vh;
}
</style>
